﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>

</head>
<style>
    body {
        background: #fff;
        overflow: auto;
    }

    ul,
    li {
        margin: 0;
        padding: 0;
    }

    footer {
        display: none;
    }

    .talent {
        width: 98vw;
        max-width: 1600px;
        margin: 30px auto 0;
        display: flex;
    }

    .talent-left {
        width: calc(70% - 20px);
        margin-right: 20px;
    }

    .talent-right {
        width: 30%;
    }

    .talent-left-top {
        background: #ededed;
        padding: 15px;
        display: flex;
        justify-content: space-between;
    }

    .photo {
        display: flex;
        align-items: flex-end;
    }

    .photo-img {
        background-size: cover;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: #8f8f8f;
    }

    .photo-constellatory {
        background: #e86153;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: #fff;
        position: relative;
        left: -25px;
    }

    .talent-left-top-1 {
        display: flex;
        align-items: flex-start;
    }

    .Name-content {
        margin-left: 15px;
    }

        .Name-content h1 {
            color: #e0301e;
            font-size: 18px;
            margin: 0 0 5px 0;
        }

        .Name-content p {
            font-size: 14px;
            line-height: 20px;
        }

            .Name-content p.Name-title {
                font-size: 12px;
                display: flex;
            }

    .Name-title span {
        color: #d35e1f;
        display: block;
        width: 150px;
    }

    .Name-title-1 {
        margin-top: 10px;
    }

    .edit-button {
        display: flex;
        align-items: flex-end;
        flex-flow: column;
        align-self: flex-end;
    }

        .edit-button button {
            border: solid 1px #e14131;
            color: #e14131;
            background-color: transparent;
            padding: 5px 10px;
            margin-top: 10px;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .edit-button i {
            font-size: 16px;
            margin: 0 5px;
        }

    .talent-left-main {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
    }

    .talent-left-main-left {
        width: calc(60% - 30px);
    }

        .talent-left-main-left h3 {
            font-size: 12px;
            font-weight: bold;
            border-bottom: solid 1px #eaeaea;
            padding-bottom: 10px;
            margin: 0;
            color: #404041;
        }

    .talent-left-main-right {
        width: 40%;
    }

    .Radar-chart {
        margin-top: 15px;
    }

    .talent-left-main-right-top {
        font-size: 12px;
        border-bottom: solid 1px #eaeaea;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }

    .talent-left-main-right-top-1 {
        display: flex;
        font-weight: bold;
    }

        .talent-left-main-right-top-1 span {
            color: #bcbcbc;
            display: block;
            margin-left: 3px;
        }

    .talent-left-main-right-top-2 a {
        color: #4d4d44;
        text-decoration: none;
        font-size: 12px;
    }

    .talent-left-main-right-top-2 i {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 5px;
        vertical-align: middle;
        border-top: 3px dashed;
        border-top: 3px solid\9;
        border-right: 3px solid transparent;
        border-left: 3px solid transparent;
    }

    .talent-left-main-right-list ul {
        border: solid 1px #eaeaea;
        overflow: auto;
        max-height: 400px;
    }

        .talent-left-main-right-list ul li {
            display: flex;
            border-top: solid 1px #eaeaea;
            justify-content: space-between;
            padding: 10px 15px;
            flex-flow: column;
        }

            .talent-left-main-right-list ul li:first-child {
                border-top: none;
            }

    .right-list-content {
        display: flex;
        justify-content: space-between;
    }

    .right-list-right {
        display: flex;
        justify-content: space-between;
        width: 60%;
        margin-top: 10px;
    }

        .right-list-right i {
            border-radius: 50%;
            width: 20px;
            height: 20px;
            background: #ec8f08;
            display: block;
            margin-bottom: 2px;
            color: #fff;
            text-align: center;
        }

        .right-list-right span {
            font-size: 12px;
            color: #ec8f08;
        }

    .right-list-title {
        font-size: 14px;
        margin: 0;
    }

    .right-list-year {
        font-size: 12px;
        color: #8f8f8f;
        margin-top: 5px;
    }

    .right-list-Label {
        margin-top: 5px;
    }

        .right-list-Label span {
            background: #7d7d7d;
            color: #fff;
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 25px;
        }

    .talent-right-Title {
        border-bottom: solid 1px #eaeaea;
        font-weight: bold;
        font-size: 14px;
        color: #2d2d2d;
        padding-bottom: 10px;
    }

    .talent-right-1-m {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .talent-right-1-m p {
            width: 16.66%;
            margin: 10px 0;
        }

            .talent-right-1-m p i {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-size: cover;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #eaeaea;
                color: #4d4d44;
                font-style: normal;
            }

    .talent-right-2 {
        margin-top: 15px;
    }

    .talent-right-2-m {
        overflow: auto;
        max-height: 220px;
        margin-top: 10px;
    }

    .talent-right-2-m-1 {
        color: #bcbcbc;
        display: block;
        margin-bottom: 5px;
    }

        .talent-right-2-m-1 span {
            border-radius: 25px;
            background: #e0301e;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            padding: 5px 10px;
            line-height: 30px;
        }

    .talent-right-2-m-2 {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .talent-left-main-right-tab {
        display: flex;
        position: relative;
        top: 1px;
    }

        .talent-left-main-right-tab p {
            border: solid 1px #eaeaea;
            padding: 3px 5px;
            font-size: 12px;
            margin: 10px 5px 0 0;
            border-bottom: 0;
        }

            .talent-left-main-right-tab p:hover, .talent-left-main-right-tab p.PSelected {
                border-color: #e0301e;
                color: #e0301e;
                cursor: pointer;
                border-bottom: solid 1px #fff;
            }
    /*ipad*/

    @media screen and (min-device-width:768px) and (max-device-width: 1366px) {
    }

    @media(max-width:1000px) {
        .talent {
            width: 100%;
            flex-direction: column;
        }

        .talent-left {
            width: 100%;
            margin-right: 0;
        }

        .talent-left-top {
            padding: 10px;
        }

        .Name-content {
            margin-left: 10px;
            width: calc(100% - 130px);
        }

        .Name-title span {
            width: 80px;
        }

        .photo-img {
            width: 120px;
            height: 120px;
        }

        .photo-constellatory {
            width: 40px;
            height: 40px;
            left: -30px;
        }

        .talent-left-top {
            flex-flow: column;
        }

        .edit-button {
            flex-flow: row;
        }

            .edit-button button {
                margin: 10px 5px;
            }

        .talent-left-main {
            flex-flow: column;
        }

        .talent-left-main-left,
        .talent-left-main-right,
        .talent-right {
            width: calc(100% - 20px);
            margin: 0 10px;
            overflow: hidden;
        }

        .talent-right {
            margin-top: 15px;
        }
    }
</style>

<body>
    <div class="talent">
        <div class="talent-left">
            <div class="talent-left-top">
                <div class="talent-left-top-1">
                    <div class="photo">
                        <p class="photo-img" style="background-image: url(CN116130.jpg)">
                        <p class="photo-constellatory"></p>

                    </div>
                    <div class="Name-content">
                        <h1>Jenny Xiong 熊菲</h1>
                        <p>Tax - CN Corp Tax</p>
                        <p>Senior Assoclate</p>
                        <p class="Name-title Name-title-1"><span>Extension</span>X3550</p>
                        <p class="Name-title"><span>Clity</span>Shanghai</p>
                    </div>
                </div>
                <div class="edit-button">
                    <button><i class="mdi mdi-calendar-blank"></i>Sechedule</button>
                    <button><i class="mdi mdi-chart-timeline"></i>Timesheet</button>
                </div>

            </div>
            <div class="talent-left-main">
                <div class="talent-left-main-left">
                    <h3>Skills matrix & competencies</h3>
                    <div class="Radar-chart"></div>
                </div>
                <div class="talent-left-main-right">
                    <div class="talent-left-main-right-top">
                        <div class="talent-left-main-right-top-1">Projects experience<span>&bull; 8</span></div>
                        <div class="talent-left-main-right-top-2"><a href="">FY19<i></i></a></div>
                    </div>
                    <div class="talent-left-main-right-list">
                        <div class="talent-left-main-right-tab">
                            <p class="PSelected">A1</p>
                            <p>A2</p>
                            <p>A3</p>
                        </div>
                        <ul>
                            <li>
                                <p class="right-list-title">Digital Maker</p>
                                <div class="right-list-content">
                                    <div>
                                        <p class="right-list-year">FY19</p>
                                        <p class="right-list-Label"><span>Completed</span></p>
                                    </div>
                                    <div class="right-list-right">
                                        <p><i class="mdi mdi-message"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-brightness-7"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-thumb-up"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-stadium"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-account-multiple"></i><span>3.9</span></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <p class="right-list-title">Digital Maker</p>
                                <div class="right-list-content">
                                    <div>
                                        <p class="right-list-year">FY19</p>
                                        <p class="right-list-Label"><span>Completed</span></p>
                                    </div>
                                    <div class="right-list-right">
                                        <p><i class="mdi mdi-message"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-brightness-7"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-thumb-up"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-stadium"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-account-multiple"></i><span>3.9</span></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <p class="right-list-title">Digital Maker</p>
                                <div class="right-list-content">
                                    <div>
                                        <p class="right-list-year">FY19</p>
                                        <p class="right-list-Label"><span>Completed</span></p>
                                    </div>
                                    <div class="right-list-right">
                                        <p><i class="mdi mdi-message"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-brightness-7"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-thumb-up"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-stadium"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-account-multiple"></i><span>3.9</span></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <p class="right-list-title">Digital Maker</p>
                                <div class="right-list-content">
                                    <div>
                                        <p class="right-list-year">FY19</p>
                                        <p class="right-list-Label"><span>Completed</span></p>
                                    </div>
                                    <div class="right-list-right">
                                        <p><i class="mdi mdi-message"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-brightness-7"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-thumb-up"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-stadium"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-account-multiple"></i><span>3.9</span></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <p class="right-list-title">Digital MakerDigital MakerDigital MakerDigital Maker</p>
                                <div class="right-list-content">
                                    <div>
                                        <p class="right-list-year">FY19</p>
                                        <p class="right-list-Label"><span>Completed</span></p>
                                    </div>
                                    <div class="right-list-right">
                                        <p><i class="mdi mdi-message"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-brightness-7"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-thumb-up"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-stadium"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-account-multiple"></i><span>3.9</span></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <p class="right-list-title">Digital Maker</p>
                                <div class="right-list-content">
                                    <div>
                                        <p class="right-list-year">FY19</p>
                                        <p class="right-list-Label"><span>Completed</span></p>
                                    </div>
                                    <div class="right-list-right">
                                        <p><i class="mdi mdi-message"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-brightness-7"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-thumb-up"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-stadium"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-account-multiple"></i><span>3.9</span></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <p class="right-list-title">Digital Maker</p>
                                <div class="right-list-content">
                                    <div>
                                        <p class="right-list-year">FY19</p>
                                        <p class="right-list-Label"><span>Completed</span></p>
                                    </div>
                                    <div class="right-list-right">
                                        <p><i class="mdi mdi-message"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-brightness-7"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-thumb-up"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-stadium"></i><span>3.9</span></p>
                                        <p><i class="mdi mdi-account-multiple"></i><span>3.9</span></p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="talent-right">
            <div class="talent-right-1">
                <div class="talent-right-Title">Has worked with</div>
                <div class="talent-right-1-m">
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i style="background-image: url(CN116130.jpg)"></i></p>
                    <p><i>21+</i></p>
                </div>
            </div>
            <div class="talent-right-1 talent-right-2">
                <div class="talent-right-Title">Skills and endorsements</div>
                <div class="talent-right-2-m">
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                </div>
            </div>
            <div class="talent-right-1 talent-right-2">
                <div class="talent-right-Title">Hobbies and Interests</div>
                <div>

                </div>
            </div>
        </div>
    </div>

</body>

</html>